<template>
  <div class="home">
    <!-- <headers /> -->
    <!-- swiper -->
    <div class="swiper">
      <el-carousel v-if="info && info.imageVoList && info.imageVoList.length" height="854px">
        <el-carousel-item v-for="(item,index) in info.imageVoList" :key="index">
          <img style="height: 854px; width: 100%;" @click="godetails(item.productId)" :src="item.imurl" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 热销产品 -->
    <div class="hot">
      <!-- <div :key="index" v-for="(item,index) in 5"></div> -->
      <div
        @click="godetails(item.productId)"
        v-for="item in info.productVos && info.productVos.slice(0, 4)"
        :key="item.id"
      >
        <img :src="item.primaryUrl" alt="" />
      </div>
    </div>
    <div class="links">
      <div class="sameDiv">
        <div class="linksCont">
          <div class="same">
            <img src="../assets/a1.png" alt="" />
            <div class="name">购买渠道</div>
            <div class="more">了解更多<i class="el-icon-arrow-right"></i></div>
          </div>
          <div @click="go('/customization', '7-3')" class="same">
            <img src="../assets/a2.png" alt="" />
            <div class="name">定制开发</div>
            <div class="more">了解更多<i class="el-icon-arrow-right"></i></div>
          </div>
          <div @click="go('/qa', '7-1')" class="same">
            <img src="../assets/a3.png" alt="" />
            <div class="name">服务与支持</div>
            <div class="more">了解更多<i class="el-icon-arrow-right"></i></div>
          </div>
          <div @click="go('/qa', '7-1')" class="same">
            <img src="../assets/a4.png" alt="" />
            <div class="name">意见与建议</div>
            <div class="more">了解更多<i class="el-icon-arrow-right"></i></div>
          </div>
        </div>
      </div>
    </div>
    <div class="tiyan">
      <div>立刻体验机致科技官方企业店</div>
      <a :href="info.link" target="_blank">
        <el-button class="btn" round>立即选购</el-button>
      </a>
    </div>
  </div>
</template>

<script>
import { homepage } from "../apis/index";
// import foots from "@/components/foots.vue";
// import headers from "@/components/headers.vue";
export default {
  name: "home",
  // components: { foots, headers },
  // components: { foots },
  data() {
    return {
      flieList: [],
      activeIndex: "1",
      info: [],
    };
  },
  mounted() {
    this.getDetai();
  },
  methods: {
    godetails(id) {
      this.$router.push({
        path: "/detail?id=" + id,
      });
    },

    getDetai() {
      homepage()
        .then((res) => {
          this.info = res.data.data;
          console.log(res.data.data, 88888888888);
        })

        .catch(() => {});
    },
    go(url, cur) {
      this.$store.commit("changeactiveIndex", cur);
      this.$router.push(url);
    },
  },
};
</script>
<style lang="scss" scoped>
.tiyan {
  padding: 107px 0 60px;
  background: #323232;
  border-bottom: 1px solid #6d6e6e;
  text-align: center;
  div {
    font-size: 24px;
    font-family: FZLTTHK--GBK1, FZLTTHK--GBK1;
    font-weight: bold;
    color: #00adb4;
    margin-bottom: 40px;
  }
  .btn {
    background: #6d6e6e;
    width: 199px;
    height: 55px;
    // background: #f7f9fa;
    border-radius: 30px 30px 30px 30px;
    // opacity: 0.3;
    color: #fff;
    border: 1px solid #2a2c2e;
    font-size: 20px;
    &:hover {
      background: #00adb4;
    }
  }
}
.links {
  background: #f7f9fa;
  padding: 160px 0 116px;
  border-bottom: 19px solid #00adb4;
  .linksCont {
    display: flex;
    align-items: center;
    justify-content: space-between;
    > div {
      cursor: pointer;
      img {
        width: 100px;
        height: 100px;
      }
      .name {
        text-align: center;
        font-size: 25px;
        font-family: FZLTTHK--GBK1, FZLTTHK--GBK1;
        font-weight: bold;
        color: #2a2c2e;
        padding: 15px 0;
      }
      .more {
        font-size: 14px;
        font-family: FZLTZHK--GBK1, FZLTZHK--GBK1;
        font-weight: normal;
        color: #2a2c2e;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
      }
    }
  }
}
.hot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  > div {
    width: 49.5%;
    margin-right: 1%;
    cursor: pointer;
    img {
      display: block;
      width: 100%;
    }

    &:nth-child(2n) {
      margin-right: 0;
  
    }
  }
}

.swiper {
  border-bottom: 1px solid #2a2c2e;
  .el-carousel__item img {
    display: block;
    width: 100%;
    height: 854px;
  }
  ::v-deep .el-carousel__indicators--horizontal {
    bottom: 65px;
  }
  ::v-deep .el-carousel__button {
    width: 185px;
    height: 5px;
    background: #323232;
    border-radius: 3px 3px 3px 3px;
    padding: 0;
    margin-right: 24px;
  }
  ::v-deep .is-active .el-carousel__button {
    background: #00adb4;
  }
}
</style>
